<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref, watch } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

interface TrendPoint {
  x: string;
  y: number;
}

const props = defineProps<{ data: TrendPoint[] }>();

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

// 转换成 ECharts 需要的数据格式
function updateChart() {
  const xAxisData = props.data.map((item) => item.x);
  const seriesData = props.data.map((item) => item.y);

  renderEcharts({
    grid: {
      bottom: 0,
      containLabel: true,
      left: '1%',
      right: '1%',
      top: '2%',
    },
    series: [
      {
        name: '流量趋势',
        type: 'line',
        smooth: true,
        data: seriesData,
        areaStyle: {},
        itemStyle: {
          color: '#5ab1ef',
        },
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#019680',
          width: 1,
        },
      },
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: {
        show: false,
      },
      boundaryGap: false,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          width: 1,
        },
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      splitArea: {
        show: true,
      },
      splitNumber: 4,
    },
  });
}

onMounted(updateChart);
watch(() => props.data, updateChart, { deep: true });
</script>
<template>
  <EchartsUI ref="chartRef" />
</template>
